<template>
    <div class="team-box">
        <a-button type="primary" icon="plus" class="plus" @click="addItem"> 添加 </a-button>
        <ul>
            <li v-for="item in teamList" :key="item.id">
                <div class="top">
                    <img :src="$staticUrl + '/' + item.img" @click="imgShow(item.img)" alt="" />
                    <div class="action">
                        <a-button type="link" @click="handleEdit(item)">
                            <img src="@/assets/images/login/edit.png" alt="" />
                            <img src="@/assets/images/login/edit_hover.png" alt="" />
                        </a-button>
                        <a-button type="link" @click="deleteItem(item)">
                            <img src="@/assets/images/login/del.png" alt="" />
                            <img src="@/assets/images/login/del_hover.png" alt="" />
                        </a-button>
                    </div>
                </div>
                <h4>
                    <div>
                        <span v-if="item.technicalTitles">{{ item.technicalTitles }}</span>
                        <span>{{ item.education }}</span>
                    </div>
                </h4>
                <div class="footer">
                    <h5>{{ item.name }}</h5>
                    <span>{{ item.type === 1 ? '技术专家' : '行业专家' }}</span>
                    <div v-if="item.label.length > 0">
                        <label v-for="(sub, index) in item.label.split(',')" :key="index">{{ sub }}</label>
                    </div>
                    <p class="five-line">{{ item.description }}</p>
                </div>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    data () {
        return {
            teamList: []
        }
    },
    mounted () {
        this.getTeamList()
    },
    methods: {
        async getTeamList () {
            const res = await this.$ApiServer['company/team/list']()
            if (res.code === 200) {
                this.teamList = res.data
            }
        },
        addItem () {
            this.$router.push({
                name: 'company-manage-company-info-add-team'
            })
        },
        handleEdit (item) {
            this.$router.push({
                name: 'company-manage-company-info-add-team',
                query: {
                    id: item.id
                }
            })
        },
        async deleteItem (item) {
            const res = await this.$ApiServer['company/team/delete']({
                id: item.id
            })
            if (res.code === 200) {
                this.$message.success('删除成功')
                this.getTeamList()
            } else {
                this.$message.error(res.message)
            }
        },
        imgShow (url) {
            if (url.length) {
                const urls = url.split(',')
                this.$picturesModal({
                    urls
                })
            }
        }
    }
}
</script>

<style lang="less" scoped>
.team-box {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    padding: 0.2rem;
    background-color: #ffffff;
    .plus {
        height: 0.4rem;
        width: 1rem;
        background: @primary-color;
        color: #ffffff;
        font-size: 0.16rem;
        display: flex;
        justify-content: center;
        align-items: center;
        border: none;
        &:hover {
            border: none;
        }
    }
    ul {
        display: flex;
        flex-wrap: wrap;
        margin-top: 0.2rem;
        li {
            width: calc((100% - 1.5rem) / 4);
            padding-bottom: 0.1rem;
            margin-left: 0.5rem;
            box-shadow: 0px 0px 10px rgba(227, 227, 227, 0.8);
            border-radius: 0.06rem;
            &:nth-child(4n + 1) {
                margin-left: 0;
            }
            &:nth-child(n + 5) {
                margin-top: 0.5rem;
            }
            .top {
                position: relative;
                width: 100%;
                height: 1.6rem;
                img {
                    width: 100%;
                    height: 100%;
                    cursor: pointer;
                    object-fit: cover;
                }
                .action {
                    position: absolute;
                    width: 100%;
                    top: 0.1rem;
                    left: 0;
                    display: flex;
                    justify-content: flex-end;
                    font-size: 0.16rem;
                    button {
                        color: #999999;
                        &:hover {
                            color: #fd5454;
                        }
                        + button {
                            &:hover {
                                color: @primary-color;
                            }
                        }
                    }
                }
            }
            h4 {
                padding: 0 0.1rem;
                div {
                    display: flex;
                    justify-content: space-between;
                    border-bottom: 1px solid #f3f3f3;
                    padding: 0.1rem 0 0.1rem 0;
                    font-size: 0.14rem;
                    color: #333333;
                    span {
                        &:nth-child(1) {
                            width: 80%;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            height: inherit;
                            white-space: nowrap;
                        }
                    }
                }
            }
            .footer {
                padding: 0.2rem 0.27rem 0.17rem;
                h5 {
                    text-align: center;
                    font-size: 0.18rem;
                    color: #333333;
                    font-weight: bold;
                }
                span {
                    height: 0.2rem;
                    background: #f1e0cf;
                    border: 1px solid #9da1a4;
                    border-radius: 0.04rem;
                    padding: 0 0.1rem;
                    font-size: 0.12rem;
                    color: #333333;
                    margin-bottom: 0.1rem;
                }
                div {
                    display: inline-flex;
                    flex-wrap: wrap;
                    margin-top: 0.1rem;
                    label {
                        height: 0.2rem;
                        background: #f1e0cf;
                        border: 1px solid #9da1a4;
                        border-radius: 0.04rem;
                        padding: 0 0.1rem;
                        margin-right: 0.1rem;
                        font-size: 0.12rem;
                        color: #333333;
                        margin-bottom: 0.1rem;
                    }
                }

                p {
                    font-size: 0.12rem;
                    color: #333333;
                    text-indent: 0.24rem;
                    padding: 0 0.2rem;
                }
            }
        }
    }
}

.action {
    ::v-deep {
        img {
            width: auto !important;
            height: 16px !important;
        }
        img:nth-child(1) {
            display: inline-block;
        }
        img:nth-child(2) {
            display: none;
        }
    }
    button:hover {
        ::v-deep {
            img:nth-child(1) {
                display: none;
            }
            img:nth-child(2) {
                display: inline-block;
            }
        }
    }
}
</style>
